<template>
  <div class="login_box">
    <div class="login_context" v-if="isshow">
      <h2 class="login_title">登录页面</h2>

      <el-form :model="loginFrom" ref="loginFromRef" :rules="loginFromRules">
        <el-form-item class="mt30" prop="username">
          <el-input
            placeholder="请输入用户名"
            v-model="loginFrom.username"
          ></el-input>
        </el-form-item>
        <el-form-item class="mt30" prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="loginFrom.password"
          ></el-input>
        </el-form-item>
        <el-form-item class="loginBtn">
          <el-button type="primary" @click="loginBtn('loginFromRef')"
            >确定</el-button
          >
          <el-button @click="isshow = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { loginApi, getMenusApi } from "@/http/api";
import { fn } from "@/utils/routeList.js"; //生成列表结构路由方法
export default {
  name: "login",
  data() {
    return {
      isshow: true,
      loginFrom: {
        username: "",
        password: "",
      },
      loginFromRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  computed: {},
  methods: {
    loginBtn() {
      this.$refs.loginFromRef.validate(async (valid) => {
        if (!valid) return false;
        await loginApi(this.loginFrom);
        this.loadRoute();
        this.$router.push("/home");
      });
    },

    async loadRoute() {
      let res = await getMenusApi();
      console.log(res, "66");
      // res.meta.status
      // if (res.meta.status === 200) {
      //2.把路由表提炼成一个公共方法-别忘记 存储下左侧导航
      sessionStorage.setItem("getMenusApi", JSON.stringify(res));
      let newList = fn(res);
      console.log("递归后的列表路由", newList);
      newList.forEach((item) => {
        this.$router.addRoute("Home", item);
      });
      // }
    },
  },
  mounted() {},
  created() {},
};
</script>
<style scoped lang="scss">
@import "@/mixins/style/layout.scss";
.login_box {
  width: 100%;
  height: 100%;
  background-color: #2b4b6b;
  position: relative;
  .login_context {
    padding: 0 10px;
    width: 40%;
    height: 300px;
    min-width: 350px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #fff;
    @include h_v_center;
  }
  .login_title {
    text-align: center;
  }
  .loginBtn {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
